<!DOCTYPE html>
<html>

<head>
  <title>css唱片</title>
  <style>
    #grad1 {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: black;
      border-radius: 50%;
      background: repeating-radial-gradient(black 1px, black 4px, #1c1c1c 6px);
    }

    #grad1::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: solid 1px #fff;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
      background: #fff;
      content: '';
    }

    #grad1::before {
      position: absolute;
      width: 200px;
      height: 200px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(45deg, transparent 35%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 55%);
      content: '';
    }
  </style>
</head>

<body>

  <div id="grad1"></div>

</body>

</html>